<template>
  <div class="ek-search" :class="size">
    <el-row>
      <el-col :span="8" v-for="item in params" :key="item.column">
        <div class="search-item">
          <label>{{ item.label }}</label>
          <div class="search-item-flex" v-if="item.type == 'Input'">
            <ekInput
              v-model="searchData[item.column]"
              @keyup.enter="search"
              :size="size"
            />
          </div>
          <div class="search-item-flex" v-else-if="item.type == 'Select'">
            <ekSelect
              :size="size"
              v-model="searchData[item.column]"
              :autoInit="item.autoInit"
              :url="item.url"
              :dimCode="item.dimCode"
              :options="item.options"
              :multiple="true"
              @keyup.enter="search"
            />
          </div>
          <div class="search-item-flex" v-else-if="item.type == 'SelectModel'">
            <ekSelectModel
              :size="size"
              v-model="searchData[item.column]"
              :url="item.url"
              :modelCode="item.modelCode"
              :options="item.options"
              :mapping="item.mapping"
              :multiple="true"
              @keyup.enter="search"
            />
          </div>
          <div class="search-item-flex" v-else-if="item.type == 'DatePicker'">
            <ekDatePicker
              :size="size"
              v-model="searchData[item.column][0]"
              @keyup.enter="search"
              :mode="item.mode"
              :format="item.format"
            />
            <span>-</span>
            <ekDatePicker
              :size="size"
              v-model="searchData[item.column][1]"
              @keyup.enter="search"
              :mode="item.mode"
              :format="item.format"
            />
          </div>
          <div
            class="search-item-flex"
            v-else-if="item.type == 'DateTimePicker'"
          >
            <ekDateTimePicker
              :size="size"
              v-model="searchData[item.column][0]"
              @keyup.enter="search"
            />
            <span>-</span>
            <ekDateTimePicker
              :size="size"
              v-model="searchData[item.column][1]"
              @keyup.enter="search"
            />
          </div>
          
        </div>
      </el-col>
      <el-col :span="(3 - (params.length % 3)) * 8">
        <div class="search-item search-btn">
          <span></span>
          <el-button @click.stop="reset" plain :size="size">重置</el-button>
          <el-button @click.stop="search" type="primary" :size="size"
            >查询</el-button
          >
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, defineEmits } from "vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekSelectModel from "@/components/form/ekSelectModel/index.vue";
import ekDatePicker from "@/components/form/ekDatePicker/index.vue";
import ekDateTimePicker from "@/components/form/ekDateTimePicker/index.vue";
const props = defineProps({
  // 查询参数
  params: {
    type: Array,
    default: [],
  },
  size: {
    type: String,
    default: "default",
  },
  mode: {
    type: String,
    default: "default",
  },
});
// emit
const emit = defineEmits(["search"]);

// 查询表单数据
let searchData = ref({});
// 初始化查询
function initSearch() {
  searchData.value = {};
  props.params.forEach((item) => {
    if (item.type == "Input") {
      searchData.value[item.column] = "";
    } else if (item.type == "Select" || item.type == "SelectModel") {
      searchData.value[item.column] = [];
    } else if (["DatePicker", "DateTimePicker"].includes(item.type)) {
      searchData.value[item.column] = [];
    }
  });
}
// 初始化
initSearch();

// 重置
function reset() {
  initSearch();
}
// 点击查询
function search() {
  let data = handleSearch(searchData.value);
  emit("search", data);
}

// 查询数据处理
function handleSearch(searchData) {
  console.log(searchData,'searchDatasearchData')
  if (props.mode == "default") {
    let arr = [];
    if (Object.keys(searchData).length) {
      for (let i in searchData) {
        let type = getSearchDataTypeByKey(i, props.params);
        if (type == "Input" && searchData[i]) {
          arr.push({
            symbol: "like",
            paramKey: i,
            paramValue: searchData[i],
          });
        } else if (["Select", "SelectModel"].includes(type) && searchData[i]) {
          if (searchData[i].length > 0) {
            arr.push({
              symbol: "in",
              paramKey: i,
              paramValue: searchData[i],
            });
          }
        } else if (["DateTimePicker"].includes(type) && searchData[i].length) {
          if (searchData[i][0]) {
            arr.push({
              symbol: "egt",
              paramKey: i,
              paramValue: Math.floor(searchData[i][0] / 1000),
            });
          }
          if (searchData[i][1]) {
            arr.push({
              symbol: "lt",
              paramKey: i,
              paramValue: Math.floor(searchData[i][1] / 1000),
            });
          }
        } else if (["DatePicker"].includes(type) && searchData[i].length) {
          if (searchData[i][0]) {
            arr.push({
              symbol: "egt",
              paramKey: i,
              paramValue: Math.floor(searchData[i][0] / 1000),
            });
          }
          if (searchData[i][1]) {
            // 将时间戳转换为日期对象
            const date = new Date(searchData[i][1]);
            // 将时间设置为当天的 24:00:00
            date.setHours(0, 0, 0, 0);
            arr.push({
              symbol: "lt",
              paramKey: i,
              paramValue: Math.floor(date.getTime() / 1000) + 24 * 60 * 60 - 1,
            });
          }
        }
      }
    }

    return arr;
  } else {
    let newArr = {};
    for(let i in searchData){
      let item = searchData[i];
      if(  (!Array.isArray(item) && item) ||  (Array.isArray(item) && item.length)){
          newArr[i] = item;
      }
    }
    return newArr
  }
}

// 获取当前表单类型
function getSearchDataTypeByKey(keys, params) {
  for (let i in params) {
    if (params[i].column == keys) {
      return params[i].type;
    }
  }
  return "";
}
</script>

<style scoped lang="scss">
.ek-search {
  .ek-input,
  .ek-select,
  .ek-textarea {
    width: 100%;
    // max-width: 260px;
  }
  .ek-select {
    :deep(.el-select) {
      width: 100%;
    }
  }
  .ek-date-picker {
    :deep(.el-date-editor.el-input) {
      width: 100%;
    }
  }

  .search-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    label {
      width: 100px;
      text-align: right;
      margin-right: 10px;
      flex-shrink: 0;
    }
    .search-item-flex {
      width: 100%;
      display: flex;
      align-items: center;
      .ek-date-picker {
        width: 48%;
      }
      span {
        padding: 0 1%;
      }
    }
  }
  .search-btn {
    justify-content: flex-end;
  }
  &.small {
    .search-item {
      label {
        width: 80px;
        font-size: 12px;
      }
    }
  }
}
</style>
